<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<%@ taglib prefix="l" uri="/WEB-INF/struts-logic.tld"%>

<%@ taglib uri="/WEB-INF/hexacta.tld" prefix="hexacta"%>

<head>
<sx:head cache="true" />
<link rel="stylesheet" href="/hrs-intranet/styles/errortag.css"
	type="text/css" />
<link rel="stylesheet" href="/hrs-intranet/styles/TabContainerLocal.css"
	type="text/css" />
<link rel="stylesheet" href="/hrs-intranet/styles/displaytag.css"
	type="text/css" />
<link rel="stylesheet" type="text/css"
	href="/hrs-intranet/styles/jsgantt.css" />

<link type="text/css"
	href="/hrs-intranet/js/jquery/css/ui-lightness/jquery-ui-1.8.16.custom.css"
	rel="stylesheet" />
<script type="text/javascript"
	src="/hrs-intranet/js/jquery/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript"
	src="/hrs-intranet/js/jquery/js/jquery-ui-1.8.16.custom.min.js"></script>

</head>

<script type="text/javascript">
	function showDialog(id) {
		$(id).dialog('open');
		return false;
	}

	$(function() {
		$("#accordion").accordion({
			collapsible : true,
			clearStyle : true,
			active : false
		});
		$("#accordion").removeClass("ui-accordion-header");
		$("#accordion").removeClass("ui-helper-reset");
		$("#accordion").removeClass("ui-state-default");
		$("#accordion").removeClass("ui-state-hover");
		$("#accordion").removeClass("ui-corner-all");
		$("#accordion").removeClass("ui-corner-top");
		$("#accordion").removeClass("ui-state-active");
		$("#accordion").removeClass("ui-accordion-header");
		/* ui-accordion-header ui-helper-reset  */
	});

	$(document).ready(function() {

		// Dialog			
		$("div[id^='dialog']").dialog({
			autoOpen : false,
			modal : true,
			draggable : false,
			resizable : false,
			width : 500,
			closeText : 'hide',
			height : 'auto',
			zIndex : 0,
			hide : {
				effect : 'drop',
				direction : "down"
			},
			show : {
				effect : 'drop',
				direction : "up"
			},
			open : function(event, ui) {
				$(".ui-dialog-titlebar").hide();
				$(".ui-dialog-titlebar-close").hide();
			}
		});

		// 				$("div[id^='dialog']").dialog('widget').find(
		// 						".ui-dialog-titlebar").hide();

	});
</script>

<script type="text/javascript">
	function setEdit(itemId, dateFrom, valueARS) {

		document.getElementById('selectedExchangeItemId').value = itemId;

		var dateFromPicker = dojo.widget.byId("editFormDateFrom");
		dateFromPicker.setValue(new Date(Number(dateFrom)));

		document.getElementById('editFormARSValue').value = valueARS;
	}

	function showConfirmDialog(exchange, itemId) {
		if (confirm("Are you sure that you want to delete the exchange item?")) {
			return true;
		} else {
			return false;
		}
	}
</script>


<s:include value="errorsSection.jsp"></s:include>
<s:fielderror />

<s:form cssClass="formClass">
	<sx:autocompleter list="currencies" listValue="string"
		searchType="startstring" listKey="string" showDownArrow="false"
		name="selectedCurrency" resultsLimit="-1" keyName="selectedCurrency"
		label="Select currency" />
	<s:submit action="ExchangeAction_filter" key="Filter" align="center"
		style="text-align: center" cssClass="btn" id="okbtn" />
</s:form>

<s:if test="%{filteredExchange != null}">
	<display:table id="exchange" name="exchangeItems" defaultsort="1"
		defaultorder="descending" requestURI="ExchangeAction_filter"
		class="listable" cellpadding="0" cellspacing="0" pagesize="20">
		<display:column property="dateFrom" title="Date From"
			format="{0,date,dd/MM/yyyy}" sortable="true" />
		<display:column property="valueARS" title="Value in ARS"
			sortable="true" />
		<display:column title="Options" sortable="false">
			<s:a href="#" id="dialog_link"
				onclick="javascript: setEdit('%{#attr.exchange.id}','%{#attr.exchange.dateFrom.time}','%{#attr.exchange.valueARS}'); return showDialog('#dialogEditItem');">Edit</s:a>
			<s:form id="deleteForm" action="ExchangeAction_deleteItem"
				cssClass="formClass">
				<s:hidden name="exchangeId" />
				<s:hidden name="selectedExchangeItemId" value="%{#attr.exchange.id}" />
				<a
					onclick="javascript:if (showConfirmDialog('${exchangeId}', '${exchange.id}')) { $(this).closest('form').submit() }">
					Delete </a>
			</s:form>
		</display:column>
	</display:table>
	<s:a cssClass="Add" href="#" id="dialog_link"
		onclick="javascript: return showDialog('#dialogItem');">Add Exchange Item</s:a>
</s:if>


<div id="dialogItem" title="Create New Exchange Item">
	<h2>Create New Exchange Item</h2>
	<s:form cssClass="formClass">
		<s:hidden name="exchangeId" id="exchangeId" />
		<s:hidden name="selectedCurrency" id="selectedCurrency" />
		<s:textfield label="Selected Currency" disabled="true"
			value="%{selectedCurrency}" cssClass="dojoComboBox" />
		<s:textfield label="Value in ARS" name="formARSValue"
			cssClass="dojoComboBox" />
		<sx:datetimepicker id="formDateFrom" name="formDateFrom"
			label="Date From" displayFormat="dd/MM/yyyy" value="%{'today'}" />

		<table>
			<tr>
				<td>
					<table>
						<tr>
							<td><s:submit key="Ok" cssClass="btn" cssStyle="align:left"
									id="okbtn" action="ExchangeAction_createItem" /></td>
						</tr>
					</table></td>
				<td>
					<table>
						<tr>
							<td><input type="button" value="Cancel" class="btn"
								onclick="$('#dialogItem').dialog('close');" /></td>
						</tr>
					</table></td>
			</tr>
		</table>
	</s:form>
</div>

<div id="dialogEditItem" title="Edit Exchange Item">
	<h2>Edit Exchange Item</h2>
	<s:form cssClass="formClass">
		<s:hidden name="exchangeId" id="exchangeId" />
		<s:hidden name="selectedExchangeItemId" id="selectedExchangeItemId" />
		<s:hidden name="selectedCurrency" id="selectedCurrency" />
		<s:textfield label="Selected Currency" disabled="true"
			value="%{selectedCurrency}" cssClass="dojoComboBox" />
		<s:textfield label="Value in ARS" name="formARSValue"
			id="editFormARSValue" cssClass="dojoComboBox" />
		<sx:datetimepicker id="editFormDateFrom" name="formDateFrom"
			label="Date From" displayFormat="dd/MM/yyyy" />

		<table>
			<tr>
				<td>
					<table>
						<tr>
							<td><s:submit key="Ok" cssClass="btn" cssStyle="align:left"
									id="okbtn" action="ExchangeAction_editItem" /></td>
						</tr>
					</table></td>
				<td>
					<table>
						<tr>
							<td><input type="button" value="Cancel" class="btn"
								onclick="$('#dialogEditItem').dialog('close');" /></td>
						</tr>
					</table></td>
			</tr>
		</table>
	</s:form>
</div>
